<template>
  <div class="contact">
    <div class="contact-left">
      <div class="contact-list-title">群组</div>
      <div class="group-list">
        <div
          v-for="group in groups || []"  class="group-item"
          @click="showGroupProfile(group)"
        >
          <div class="group-avatar">
            <img :src="group.groupAvatar"/>
          </div>
          <div class="group-name">{{ group.groupName }}</div>
        </div>
      </div>
      <div class="contact-list-title">好友</div>
      <div class="friend-list">
        <div
          v-for="friend in friends || []"  class="friend-item"
          :class="{actived: friend.data.userId === currentUser.userId.toString()}"
          @click="showFriendProfile(friend)"
        >
          <div class="friend-avatar">
            <img :src="friend.data.avatar"/>
          </div>
          <div class="friend">
            <div class="friend-name">{{ friend.data.nickName }}</div>
            <div class="friend-mail">{{ friend.data.email }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="contact-main">
      <div class="profile-card" v-if="friend">
        <div class="profile-card-title">
          <div class="profile-name">
            <i class="iconfont icon-zhanghu"></i>
            <div>{{ friend.data.nickName }}</div>
          </div>
          <div class="profile-avatar">
            <img :src="friend.data.avatar"/>
          </div>
        </div>
        <div class="friend-info">
          <div class="info-name">邮 箱</div>
          <div class="info-text">{{friend.data.email }}</div>
        </div>
        <div class="friend-info">
          <div class="info-name">手 机</div>
          <div class="info-text">{{ friend.data.phonenumber }}</div>
        </div>
      </div>
      <div class="profile-card" v-if="members">
        <div class="group-profile-name">{{group.groupName }}({{members.length}})
          <span style="margin-left: 100px">群成员</span>
          <el-button style="margin-left: 100px;color: black;font-size: large" type="text"
                     @click="dialogFormVisible = true,addGroup()">邀请加入</el-button>
        </div>
        <div class="group-members">
          <div class="member" v-for="member in members">
            <img class="member-avatar" :src="member.data.avatar"/>
            <span class="member-name">{{ member.data.nickName }}</span>
          </div>
        </div>
      </div>
      <el-dialog title="邀请好友" :visible.sync="dialogFormVisible">
        <el-form :model="form">

          <el-form-item label="我的好友" label-width="123px">
            <el-select v-model="form.region" multiple  placeholder="请选择好友">
              <el-option  v-for="friend in addGroupUser"
                          :key="friend.data.userId"
                          :label="friend.data.nickName"
                          :value="friend.data.userId"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addUserToGroup">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import restApi from "../../../api/restapi"
import {byUserId, getUserById} from "@/api/message/message";
import {listGroups,getGroup} from "@/api/message/group"
import {addGroupUser, listGroupUser} from "@/api/message/groupUser"
export default {
  data() {
    return {
      dialogFormVisible:false,
      form:{},
      currentUser: "",
      friends: [],
      groups: [],
      friend:"",
      members:[],
      group:"",
      addGroupUser:[]
    };
  },
  created() {
    this.members=null
    this.currentUser = this.$store.state.user.user
    byUserId(this.currentUser.userId).then(resp => {
      this.friends =resp
    })
    listGroups(this.currentUser.userId).then(resp=>{
      this.groups = resp.rows
    })

  },
  methods: {
    addUserToGroup(){
      for (let i = 0; i < this.form.region.length; i++) {
        const groupUser = ({
          groupId:this.group.id,
          userId:this.form.region[i]
        })
        addGroupUser(groupUser)
       location.reload()
      }
      this.dialogFormVisible=false
    },
    addGroup(){
      this.addGroupUser=[]
      for (let i = 0; i < this.friends.length; i++) {
        let foundMatch = false;
        for (let j = 0; j < this.members.length; j++) {
          if (this.friends[i].data.userId === this.members[j].data.userId) {
            foundMatch = true;
            break;
          }
        }
        if (!foundMatch) {
          this.addGroupUser.push(this.friends[i]);
        }
      }
    },
    showFriendProfile(friend) {
      this.group = null;
      this.members=null
      this.friend = friend;
    },
    showGroupProfile(group) {
      this.friend=null;
      listGroupUser(group.id).then(resp=>{
        this.members=[]
        for (let i = 0; i < resp.rows.length; i++) {
          getUserById(resp.rows[i].userId).then(resp=>{
            this.members.push(resp)
          })
        }
      })
      getGroup(group.id).then(resp=>{
        this.group=resp.data
      })
    },

  },
};
</script>

<style scoped>
.contact {
  width: 100%;
  height: 100%;
  display: flex;
  background: #F7F7F7;
  color: #333333;
}

.contact-left {
  width: 220px;
  height: 100%;
  border-right: #dbd6d6 1px solid;
}

.contact-list-title {
  margin: 10px 20px;
  font-size: 14px;
}

.friend-list {
  display: flex;
  flex-direction: column;
}

.group-list {
  display: flex;
  flex-direction: column;
}

.friend-item {
  display: flex;
  padding: 5px 10px;
  cursor: pointer;
}

.friend-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 10%;
  margin-left: 10px;
}

.friend {
  width: 65%;
  margin: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding-left: 10px;
}

.friend-name {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}

.friend-mail {
  line-height: 21px;
  color: #888888;
}

.group-item {
  display: flex;
  padding: 5px 10px;
  cursor: pointer;
  align-items: center;
  background: #F7F7F7;
}

.group-avatar {
  width: 40px;
  height: 40px;
  margin-left: 10px;
}

.group-avatar img {
  width: 40px;
  height: 40px;
}

.group-name {
  margin-left: 10px;
  width: 160px;
  text-align: left;
  font-size: 14px;
  line-height: 40px;
}

.contact-main {
  flex: 1;
  background: #FFFFFF;
}

.profile-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.profile-card-title {
  flex: 1;
  border-bottom: 1px solid #eeeeee;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.profile-name {
  width: 300px;
  font-size: 18px;
  display: flex;
  align-items: center;
}

.icon-zhanghu {
  font-size: 26px;
  color: #eeeeee;
  margin-right: 10px;
}

.profile-avatar {
  width: 80px;
}

.profile-avatar img {
  width: 80px;
  height: 80px;
  border-radius: 10%;
}

.friend-info {
  padding: 10px 30px;
  display: flex;
  justify-content: space-around;
  text-align: left;
  font-size: 14px;
  line-height: 45px;
}

.info-name {
  width: 100px;
}

.info-text {
  width: 200px;
}

.group-profile-name {
  font-size: 18px;
  padding: 20px 70px;
  border-bottom: 1px solid #eeeeee;
}

.group-members {
  width: 400px;
  min-height: 200px;
  margin: 20px auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.group-members .member {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;

}

.group-members .member-avatar {
  width: 58px;
  margin-top: 20px;
  border-radius: 5%;
}

.group-members .member-name {
  color: gray;
  margin-top: 10px;
  font-size: 12px;
}

.button-box {
  padding: 40px 0;
}

.card-button {
  background: #eeeeee;
  color: #000000;
  font-size: 14px;
  border: none;
  display: flex;
  width: 120px;
  height: 35px;
  cursor: pointer;
  border-radius: 5px;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
}
</style>
